import React, { useState }  from 'react';
import './index.less';
import api from '../../../axios'
import { Row, Table, Modal, DatePicker, Divider, Button, Image,
  Form,
  Select,
  Switch,
  Input,
  message,
Upload, } from 'antd';
  
import { InboxOutlined, UploadOutlined, LoadingOutlined, PlusOutlined } from '@ant-design/icons';

const formItemLayout = {
    labelCol: {
        span: 6,
    },
    wrapperCol: {
        span: 14,
    },
};


const getBase64 = (img, callback) => {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result));
  reader.readAsDataURL(img);
};



class index extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 
            visible: false,
            loading: true,
            fileloading: false,
            imageUrl: '',
        };
    }
    

    showModal = () => {
        this.setState({
            visible: true,
        });
    };
    
    hideModal = () => {
        this.props.cancelModal()
    };

    componentDidMount(){
        console.log(this.props.initialValues);
        this.setState({
          imageUrl: this.props.initialValues.image || ''
        })
    }


    editSwiper = async ({ num }) => {
        let res = await api.ajax({
            method: 'post',
            url: `/code/create`,
            data: {
              num,
            }
        });
        message.success(res.msg);
        this.props.cancelModal()
    } 


    
    render() {
        const onFinish = (values) => {
            this.editSwiper(values)
        };

        const handleChange = (info) => {
          const { fileList } = info
          let length = fileList.length
          let { response } = fileList[length - 1]
          if (info.file.status === 'uploading') {
            this.setState({
              fileloading: false
            })
            return;
          }
          if (info.file.status === 'done') {
            // Get this url from response in real world.
            getBase64(info.file.originFileObj, (url) => {
              this.setState({
                fileloading: false,
                imageUrl: response.data
              })
            });
          }
        };
  

        const { initialValues } = this.props
        const { imageUrl, fileloading } = this.state
        const uploadButton = (
          <div>
            {fileloading ? <LoadingOutlined /> : <PlusOutlined />}
            <div
              style={{
                marginTop: 8,
              }}
            >
              Upload
            </div>
          </div>
        );
  
    
        return (
           <>
             <Modal
                  title="发码"
                  width={800}
                  visible={true}
                  onCancel={this.hideModal}
                  onOk={() => this.onOk(this.state.data3)}
                  okText="保存"
                  footer={false}
                  cancelText="取消"
              >
                  <Form
                    name="validate_other"
                    {...formItemLayout}
                    onFinish={onFinish}
                    initialValues={
                      initialValues
                    }
                  >

                    <Form.Item
                        label="数量"
                        name="num"
                        rules={[{ required: true, message: '请输入数量' }]}
                      >
                        <Input />
                    </Form.Item>

                    <Form.Item wrapperCol={{ span: 12, offset: 6 }}>
                      <Button type="primary" htmlType="submit">
                        保存
                      </Button>
                    </Form.Item>
                  </Form>
              </Modal>
           </>
        );
    }
}

export default index;